<template>
    <div class="tech-welfare-item">
        <img class="welfare-icon" :src="iconSrc" alt="">
        <div class="welfare-content">
            <div class="title">{{title}}</div>
            <div class="tip">{{tip}}</div>
        </div>
        <div class="welfare-action">
            <Button v-if="isGeted" class="disable-btn" plain hairline size="small" round disabled>已完成</Button>
            <Button v-else plain hairline size="small" round @click="cliclAction">做任务</Button>
        </div>
    </div>
</template>

<script>
import { Button } from 'vant';
import bindPhoneIcon from '@assets/sprite/member-bind-phone.png';
import publicIcon from '@assets/sprite/member-public.png';
export default {
    name: 'WelfareItem', // 福利项
    props: {
        type: {
            type: String,
            default: 'bindphone', // bindphone public
        },
        title: String,
        tip: String,
        isGeted: {
            type: [Boolean, String],
            default: false,
        },
    },
    components: {
        Button,
    },
    computed: {
        iconSrc() {
            const { type } = this.$props;
            if (type === 'bindphone') {
                return bindPhoneIcon;
            }
            if (type === 'public') {
                return publicIcon;
            }
            return '';
        },
    },
    methods: {
        cliclAction() {
            this.$emit('action');
        },
    },
};
</script>

<style lang="less">
@icon-width: 32px;
.tech-welfare-item {
    .flex();
    align-items: center;
    justify-content: space-between;
    .m-b(@gap-md);
    &:last-child {
        .m-b(0);
    }
    .welfare-icon {
        width: @icon-width;
        height: @icon-width;
    }
    .welfare-content {
        flex: 1;
        .m-l(@gap);
        .title {
            .font-size();
        }
        .tip {
            .font-size-mini();
            color: @gray-dark;
        }
    }
    .welfare-action {
        .disable-btn {
            color: @gray-dark;
        }
    }
}
</style>
